<script setup lang="ts">
import { ElInput } from "element-plus";

import { ProRadioGroup } from "@/modules/package/form";
import ProFormMax from "@/modules/package/form/components/ProFormMax.vue";

import { EnumStaffStatus, EnumStaffType } from "@/utils/enum";
import ApiMerchant from "@/api/merchant";

const { source, modalApi } = defineProps<{
  source?: any;
  modalApi?: any;
}>();

const emits = defineEmits<{
  success: [];
}>();

const formSchema = [
  {
    label: "职工姓名",
    children: {
      type: ElInput,
      field: "staff_name",
      props: { placeholder: "请输入职工姓名" },
    },
  },
  {
    label: "联系电话",
    tooltip: !source?.id ? "与小程序注册手机号一致" : undefined,
    children: {
      type: ElInput,
      field: "mobile",
      props: { placeholder: "请输入联系电话" },
      disabled: !!source?.id,
    },
  },
  {
    label: "身份类型",
    children: {
      type: ProRadioGroup,
      field: "staff_type",
      props: {
        options: EnumStaffType,
        placeholder: "请选择身份类型",
      },
    },
  },
  {
    label: "在职状态",
    children: {
      type: ProRadioGroup,
      field: "status",
      props: {
        options: EnumStaffStatus,
        placeholder: "请选择状态",
      },
    },
  },
];

const rules = {
  staff_name: { required: true, message: "请输入职工姓名" },
  mobile: { required: true, message: "请输入联系电话" },
  staff_type: { required: true, message: "请选择身份类型" },
  status: { required: true, message: "请选择状态" },
};

const service: any = [
  source?.id ? ApiMerchant.updateMerchantStaff : ApiMerchant.addMerchantStaff,
  { defaultModel: { ...source } },
];

function handleSuccess() {
  emits("success");
  modalApi?.close();
}
</script>

<template>
  <ProFormMax
    :col="24"
    :rules="rules"
    :service="service"
    :form-items="formSchema"
    labelWidth="7em"
    @success="handleSuccess"
  />
</template>
